<template>
	<view class="viewport">
		<view class="cart__box" v-if="cartList.length != 0">   
			<view class="fixedbox">
				<view class="addressbox">
					<!--  新增收货地址 -->
					<view class="cart__newAdd" v-if="false">
						<view class="newItem"> 请选择收货地址+</view>
					</view>
					<!-- 显示已选择的地址 -->
					<view class="cart_address" v-else>
						<view class="address__row">
							<view class="row__receiver">收货人: 张三</view>
							<view class="row__contact">
								<view class="contact__phone">电话: 020-81167888</view>
								<view class="iconfont icon-youjiantou"></view>
							</view>
						</view>
						<view class="address__text">收货地址:广东省广州市海珠区新港中路387号</view>
					</view>
				</view>
				<!-- 分割线 -->
				<image class="cart__line" src="@/static/cart_border@2x.png" mode="aspectFill"></image>
				<!-- 标题 -->
				<view class="titleView">
					<view class="iconfont icon-dianpu"></view>
					<view class="text">购物车</view>
				</view>
			</view>
			<!-- 将上面空缺填起来 -->
			<view class="" :style="{ height: 152 + 'px' }"></view>
			<!-- 购物车列表 -->
			<view class="listBox">
				<!-- 列表 -->
				<uni-swipe-action class="swipeAction">
					<view class="listView">
						<view class="listItem" v-for="(item,index) in cartList" :key="index">
							<uni-swipe-action-item :right-options="options" @click="onClick($event,item)">
								<yg-goodsItem :goodsInfo="item" :showRadio="true" @numberChange="numberChange"
									@radioChange="radioChangeAction" :buyCount="item.goods_count" :showNum="true"
									class="goodsItem"></yg-goodsItem>
							</uni-swipe-action-item>
						</view>
					</view>
				</uni-swipe-action>
			</view>
			<!-- 结算工具栏 -->
			<yg-settleBar :disabled="false" :checked="isFullChecked" :amount="totalAmount" :settleCount="settleCount"
				@radioClick="fullCheckedAction" @settleClick="settleClick"></yg-settleBar>
			<!-- 底部空缺 -->
			<view class="" :style="{ height: 50  + safeAreaInsets.bottom + 'px' }"></view>
		</view>
		<!-- 空页面展示 -->
		<view class="kong__box" v-else>
			<view class="item">
				<image class="item__image" src="../../static/logo.png" mode=""></image>
				<view class="item__text"> 空空如也~ </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				// 安全区域信息
				safeAreaInsets: {},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#C00000'
					}
				}],
				// 购物车列表
				cartList: []
			}
		},
		onLoad() {
			this.safeAreaInsets = uni.getSystemInfoSync().safeAreaInsets;
			// let token = uni.getStorageSync('token')
			// if (token) {
			// 	this.isLogin = true
			// }
		},

		onShow() {
			this.cartList = this.$local_getLocalCarts()
			console.log("---  获取本地数据: " + JSON.stringify(this.cartList));
		},

		//  计算属性
		computed: {
			//  是否全选
			isFullChecked() {
				console.log("-------------------111111111----------aaaaaaaaaaaa");
				let checkedCount = this.cartList.filter(item => item.goods_checked).length
				return checkedCount === this.cartList.length && checkedCount > 0
			},
			// 合计金额
			totalAmount() {
				console.log("-------------------2222222----------aaaaaaaaaaaa");
				let amount = this.cartList.filter(item => item.goods_checked).reduce((total, item) => {
					return total += item.goods_price * item.goods_count
				}, 0.00)
				return amount
			},
			// 结算数量
			settleCount() {
				console.log("-------------------33333----------aaaaaaaaaaaa");
				return this.cartList.filter(item => item.goods_checked).length
			}
		},

		watch: {
			settleCount(newValue, oldValue) {
				if (newValue > 0) {
					uni.setTabBarBadge({
						index: 3,
						text: newValue + ''
					})
				} else {
					//  移除徽章
					uni.removeTabBarBadge({
						index: 3,
						complete() {}
					})
				}
			}
		},

		methods: {
			// radio  监听
			radioChangeAction(e) {
				const {
					goods_id,
					goods_checked
				} = e
				this.$local_updateCartItemCount(goods_id, 'goods_checked', goods_checked)
				// 用于更新
				this.cartList = this.$local_getLocalCarts()
			},

			// 数量变化回调
			numberChange(option) {
				const {
					goods_id,
					goods_count
				} = option
				this.$local_updateCartItemCount(goods_id, 'goods_count', goods_count)
				// 用于更新
				this.cartList = this.$local_getLocalCarts()
			},

			// 删除按钮
			onClick(e, item) {
				console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮', )
				console.log('-- item:', item);
				this.$local_deleteCartItem(item.goods_id)
				// 用于更新
				this.cartList = this.$local_getLocalCarts()
			},

			// 全选按钮点击
			fullCheckedAction(state) {
				this.$local_updateCartItemCount('', 'goods_checked', state)
				// 用于更新
				this.cartList = this.$local_getLocalCarts()
			},

			// 结算按钮点击
			settleClick() {
				uni.setTabBarBadge({
					index: 3,
					text: '0' + ''
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.viewport {
		// position: relative;

	}

	/** 固定区域  */
	.cart__box {
		position: relative;

		.fixedbox {
			background: #fff;
			position: fixed;
			left: 0;
			right: 0;
			z-index: 999;

			.addressbox {

				.cart__newAdd {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 180rpx;
					// background: paleturquoise;

					.newItem {
						padding: 10rpx 40rpx;
						background: #1AAD1A;
						color: #fff;
						border-radius: 20rpx;
						font-size: 26rpx;
					}
				}

				.cart_address {
					display: flex;
					flex-direction: column;
					font-size: 26rpx;
					color: #333;
					padding: 20rpx 20rpx 0;
					background: #fff;
					height: 180rpx;
					// background: papayawhip;

					.address__row {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 30rpx 0;

						.row__receiver {}

						.row__contact {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.contact__phone {
								margin-right: 6rpx;
							}
						}
					}

					.address__text {
						padding: 30rpx 0;
					}
				}
			}
		}

		.cart__line {
			width: 100%;
			height: 8rpx;
		}

		.titleView {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #333;
			padding: 15rpx 0;
			border-bottom: 1rpx solid #EFEFEE;
			padding: 10rpx 20rpx;

			.text {
				margin-left: 6rpx;
			}
		}
	}


	/** 购物车列表 */
	.listBox {
		padding: 0 20rpx;
		// background: palegoldenrod;

		.listView {
			padding: 10rpx 0;

			.swipeAction {
				flex: 1;

				.listItem {
					display: flex;
					align-items: center;

					.radio {
						margin: 0 15rpx;
					}

					.goodsItem {
						flex: 1;

						&:last-child {
							border-bottom: none;
						}
					}
				}
			}
		}
	}

	/** 空数据展示 */
	.kong__box {
		whidth: 100%;
		height: 100vh;
		//background: paleturquoise;
		display: flex;
		justify-content: center;
		padding-top: 50%;
		font-size: 26rpx;
		color: #666;

		.item {
			.item__image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
			}

			.item__text {
				text-align: center;
				padding: 10rpx;
			}
		}
	}
</style>